@import 'default';
@import './component/banner';
@import './component/grid';
@import './component/tab';
@import './component/menu';
@import './component/form';
@import './component/account';

.content{
    width:1200px;
    height: auto;
    margin:0 auto;
    padding:0px 0px 20px;
    color: #656565;
    font-size: 14px;
    .red{
        color: #ff0101;
    }
    .bule{
        color: #169bd5;
    }
    .money-red {
        background: url(../img/static/money-red.png) no-repeat;
        width: 10px;
        height: 10px;
        display: inline-block;
    }
    .fs18{
        font-size: 18px;
    }
    .fs14{
        font-size: 14px;
    }
    .fl{
        float: left;
    }
}

.content-main{
    overflow: hidden;
    margin-top: 10px;
}
.content-main-left{
    width:163px;
    height:609px;
    border:1px solid #e8e8e8;
    border-right:0;
    float: left;
}
.content-main-right{
    width:1034px;
    height:866px;
    border:1px solid #e8e8e8;
    float:right;
    .content-main-right-top{
        padding: 0 30px;
        .ml25{
            margin-left:25px;
        }
        .title{
            padding:21px 0 8px 10px;
            font-size:18px;
            border-bottom:1px solid #e8e8e8;
        }
    }
    .hide{
        display: none;
    }
    
}
.friend-list{
    padding: 19px 30px 15px 30px;
    ul{
        overflow: hidden;
        border: 1px solid #e8e8e8;
        box-sizing: border-box;
        li{
            width: 25%;
            height: 86px;
            float: left;
            box-sizing: border-box;
            padding: 24px 0 20px;
            text-align: center;
            &.border-r{
                border-right: 1px dashed #e8e8e8;
            }
            &.border-b{
                border-bottom: 1px dashed #e8e8e8;
            }
            .icon-coin{
                width: 10px;
                height: 10px;
                display: inline-block;
                background: url(../img/static/money.png) no-repeat;
                margin-left: 3px;
            }
        }
    }
}
.search-btn{
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #006cbc;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    &.ml6{
        margin-left: 6px;
    }
    &.ml12{
        margin-left: 12px;
    }
}
.my-link{
    width: 488px;
    height: 34px;
    line-height: 34px;
    padding-left: 10px;
    border: 1px solid #e8e8e8;
    margin-left: 30px;
    display: inline-block;
}
.content-main-right-table{
    padding-left: 30px;
    margin-top: 20px;
    .content-tab,.search-item{
        .tab-item{
            padding: 0 12px;
            height: 28px;
            line-height: 28px;
            display: inline-block;
            text-align: center;
            border: 1px solid #e8e8e8;
            cursor: pointer;
            margin-right: 6px;
            &.last{
                margin: 0;
            }
        }
    }
    .search-item{
        .mr20{
            margin-right: 20px;
        }
        .mr10{
            margin-right: 10px;
        }
        margin-top: 10px;
        overflow: hidden;
        .mr4{
            margin-right: 4px;
        }
        label{
            margin-top: 4px;
        }
        .calendar{
            position: relative;
            input[type=text]{
                width: 105px;
                height: 28px;
                border: 1px solid #e8e8e8;
            }
            .icon-date{
                position: absolute;
                width: 15px;
                height: 15px;
                display: inline-block;
                background: url(../img/static/date.png) no-repeat;
                right: 10px;
                top: 7px;
            }
        }
        .search-input{
            width: 80px;
            height: 30px;
            border: 1px solid #e8e8e8;
        }
        
    }

    .table-list{
        border: 1px solid #e8e8e8;
        width: 973px;
        line-height: 40px;
        text-align: center;
        margin-top: 20px;
        .table-list-header{
            height: 40px;
            background: #f4f5f9;
            div{
                float: left;
            }
        }
        .friendID{
            width: 120px;
        }
        .qqCode{
            width: 103px;
        }
        .vip{
            width: 150px;
        }
        .table-list-body{
            .body-item{
                height: 40px;
                border-bottom: 1px solid #e8e8e8;
                &.bg-color{
                    background: #e8e8e8;
                }
                div{
                    float: left;
                }
                &.last{
                    border: 0;
                }
            }
        }
    }
}